<template>
  <div class="pagination">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 7, 10, 15]"
      :page-size="currentSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="+searchTaskList.totalCount"
      hide-on-single-page
    >
    </el-pagination>
  </div>
</template>

<script>
// 封装全局组件
export default {
  name: 'Pagination',
  props: {
    searchTaskList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      currentPage: 1, // 当前页
      currentSize: 10 // 每一页占用多少
    }
  },
  methods: {
    handleSizeChange(value) {
      this.$emit('currentSizeChange', value)
    },
    handleCurrentChange(value) {
      this.$emit('currentPageChange', value)
    }
  }
}
</script>

<style lang="less" scoped>
.pagination {
  margin: 20px 0;
  text-align: center;
  /deep/.el-pagination.is-background .el-pager li{
    margin: 0 10px;
  }
}
</style>
